<template>
	<view class="con_sub">
		<view class="unit_logo">Iniciar sessão</view>
		<view class="tip">Faça login com mídia social ou com suas credenciais</view>
		<view class="register">
			<up-button color="#242631" :customStyle="btnStyle" @click="registerBtn">
				<image class="btn_icon" src="@/static/images/user/google_log.png" mode=""></image>
				<view class="btn_text">Cadastrar com Google</view>
			</up-button>
		</view>
		<up-divider text="OU" :hairline="true" lineColor="rgba(216, 216, 216, 0.05)"></up-divider>

		<view class="menu_btns">
			<view class="btn_i" :class="{ btn_ci: cur_menu == 'Email' }" @click="cur_menu = 'Email'">
				<image class="btn_icon" v-if="cur_menu == 'Email'" src="@/static/images/user/email_icon2.png" mode=""></image>
				<image class="btn_icon" v-else src="@/static/images/user/email_icon.png" mode=""></image>
				<view class="btn_texts">Email</view>
			</view>
			<view class="btn_i" :class="{ btn_ci: cur_menu == 'Telefone' }" @click="cur_menu = 'Telefone'">
				<image class="btn_icon" v-if="cur_menu == 'Telefone'" src="@/static/images/user/tel_icon2.png" mode=""></image>
				<image class="btn_icon" v-else src="@/static/images/user/tel_icon.png" mode=""></image>
				<view class="btn_texts">Telefone</view>
			</view>
		</view>

		<view class="input_all">
			<view class="input_i" v-if="cur_menu == 'Email'">
				<up-input placeholder="Digite seu nome e sobrenome" :placeholderStyle="placeholderStyle" border="none" v-model="user.name" :customStyle="inputStyle" color="#fff">
					<template #prefix>
						<view class="unit">
							<image class="i_icon" src="@/static/images/user/email2.png" mode=""></image>
						</view>
					</template>
				</up-input>
			</view>
			
			<view class="input_i" v-else>
				<up-input placeholder="Número de telefone (Usuário)" border="none" :placeholderStyle="placeholderStyle" v-model="user.phone" :customStyle="inputStyle" color="#fff">
					<template #suffix>
						<view class="input_dow">
							<up-dropdown border-radius='12rpx' >
								<up-dropdown-item @change='changedro'  v-model="value1" :title="user.code" :options="options"></up-dropdown-item>
							</up-dropdown>
						</view>
					</template>
				</up-input>
			</view>

			<view class="input_i">
				<up-input placeholder="Digite seu nome e sobrenome" border="none" :placeholderStyle="placeholderStyle" v-model="user.email" :customStyle="inputStyle" color="#fff">
					<template #prefix>
						<view class="unit">
							<image class="i_icon" src="@/static/images/user/pass.png" mode=""></image>
						</view>
					</template>
				</up-input>
			</view>
		</view>
		<view class="input_tip">Esqueceu sua senha?</view>
		
		<view class="login_btn">
			<up-button color="#10AD6B" :customStyle="btnStyle" @click="loginBtn">
				<view class="btn_text">Iniciar Sessão</view>
			</up-button>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';

const menu = ref(1);
const value1 = ref(1);
const loding = ref(false);
const cur_menu = ref('Email');
let options = [
	{
		label: '+30',
		value: '+30'
	},
	{
		label: '+86',
		value: '+86'
	}
];

const user = reactive({
	name: '',
	email: '',
	phone: '',
	code: '+30',
	password: ''
});

const btnStyle = {
	height: '98rpx',
	borderRadius: '12rpx',
	fontSize: '32rpx',
	color: '#fff',
	fontWeight: 700,
	border: '2rpx solid #454757'
};
const inputStyle = {
	height: '98rpx',
	borderRadius: '12rpx',
	background: '#19191F',
	border: '2rpx solid #454757',
	padding: '0 20rpx'
};

const placeholderStyle = "{color:'rgba(126, 132, 160, 0.5)'}";

onMounted(() => {});

const registerBtn = () => {
	console.log('注册');
};

const loginBtn = () => {
	loding.value = true;
	setTimeout(() => {
		loding.value = false;
	}, 2000);
};

const changedro = (e) => {
	user.code = e;
};

</script>

<style lang="scss" scoped>
:deep(.u-dropdown__content__mask[data-v-d45d1d94]) {
	width: 0;
}
:deep(.u-cell-group__wrapper[data-v-30c8e4c7]) {
	background-color: #454757;
}
.con_sub {
	font-size: 32rpx;
	line-height: 64rpx;
	.unit_logo {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100rpx;
		font-weight: 700;
	}
	.tip {
		font-size: 24rpx;
		color: #7e84a0;
		font-weight: 700;
		margin-top: 20rpx;
		text-align: center;
	}
	.register {
		margin: 40rpx 0;
		.btn_icon {
			height: 40rpx;
			width: 40rpx;
			margin-right: 20rpx;
		}
	}
	.menu_btns {
		margin-top: 32rpx;
		display: flex;
		align-items: center;
		border-radius: 12rpx;
		box-sizing: border-box;
		overflow: hidden;
		height: 88rpx;
		border: 1rpx solid #454757;
		.btn_i {
			width: 50%;
			background-color: #242631;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			transition: all 0.3s;
			.btn_icon {
				height: 40rpx;
				width: 40rpx;
				display: block;
				margin-right: 20rpx;
			}
		}
		.btn_ci {
			background-color: #10ad6b;
		}
	}
	.input_all {
		margin-top: 12rpx;
		.input_i {
			margin-top: 30rpx;
			padding-bottom: 18rpx;
			.unit {
				.i_icon {
					height: 40rpx;
					width: 40rpx;
					display: block;
					margin-right: 20rpx;
				}
			}
		}
	}
	.input_tip {
		font-size: 28rpx;
		color: #38aa6f;
		text-align: end;
		margin-top: 40rpx;
		font-weight: 700;
	}

	.login_btn {
		margin-top: 40rpx;
		.btn_icon {
			width: 48rpx;
			height: 48rpx;
			display: block;
			margin-right: 20rpx;
		}
		.btn_text {
			font-size: 24rpx;
			font-weight: 900;
			line-height: 40rpx;
		}
	}
	
}
</style>
